<template>
  <div>
    <a-comment :key="item.id" v-for="item in comments">
      <template slot="actions">
        <span key="comment-basic-like">
          <a-tooltip title="Like">
            <a-icon
              type="like"
              :theme="action === 'liked' ? 'filled' : 'outlined'"
              @click="like"
            />
          </a-tooltip>
          <span style="padding-left: '8px';cursor: 'auto'">
            {{ item.likes }}
          </span>
        </span>
        <span key="comment-basic-dislike">
          <a-tooltip title="Dislike">
            <a-icon
              type="dislike"
              :theme="action === 'disliked' ? 'filled' : 'outlined'"
              @click="dislike"
            />
          </a-tooltip>
          <span style="padding-left: '8px';cursor: 'auto'">
            {{ item.dislikes }}
          </span>
        </span>
        <span key="comment-basic-reply-to" @click="reply(item)">回复</span>
        <span key="comment-basic-reply-to" @click="deleteC(item)">删除</span>
      </template>
      <a slot="author">{{ item.author }}</a>
      <a-avatar
        slot="avatar"
        :src="require(`../assets/img/${item.avatar}`)"
        alt="Han Solo"
      />
      <p slot="content">
        {{ item.content }}
      </p>
      <a-tooltip slot="datetime" title="2021-3-29 12:12:59">
        <span>刚刚</span>
      </a-tooltip>
      <!-- 二级内容 -->
      <a-comment :key="d.id" v-for="d in item.nextComments">
        <template slot="actions">
          <span key="comment-basic-like">
            <a-tooltip title="Like">
              <a-icon
                type="like"
                :theme="action === 'liked' ? 'filled' : 'outlined'"
                @click="like"
              />
            </a-tooltip>
            <span style="padding-left: '8px';cursor: 'auto'">
              {{ d.likes }}
            </span>
          </span>
          <span key="comment-basic-dislike">
            <a-tooltip title="Dislike">
              <a-icon
                type="dislike"
                :theme="action === 'disliked' ? 'filled' : 'outlined'"
                @click="dislike"
              />
            </a-tooltip>
            <span style="padding-left: '8px';cursor: 'auto'">
              {{ d.dislikes }}
            </span>
          </span>
        </template>
        <a slot="author">{{ d.author }}</a>
        <a-avatar
          slot="avatar"
          :src="require(`../assets/img/${d.avatar}`)"
          alt="Han Solo"
        />
        <p slot="content">
          {{ d.comments }}
        </p>
        <a-tooltip slot="datetime" title="2021-3-29 12:12:59">
          <span>刚刚</span>
        </a-tooltip>
      </a-comment>

      <a-comment v-if="item.replyShow">
        <a-avatar
          slot="avatar"
          :src="require(`../assets/img/per.jpg`)"
          alt="Han Solo"
        />
        <div slot="content">
          <a-form-item>
            <a-textarea :rows="4" v-model="childValue" />
          </a-form-item>
          <a-form-item>
            <a-button
              class="comment-submit"
              html-type="submit"
              :loading="submitting"
              @click="addComments(item.id, childValue)"
            >
              提交
            </a-button>
          </a-form-item>
        </div>
      </a-comment>
    </a-comment>
    <a-comment>
      <a-avatar
        slot="avatar"
        :src="require(`../assets/img/per.jpg`)"
        alt="Han Solo"
      />
      <div slot="content">
        <a-form-item>
          <a-textarea :rows="4" v-model="value" />
        </a-form-item>
        <a-form-item>
          <a-button
            class="comment-submit"
            html-type="submit"
            :loading="submitting"
            @click="addComments(0, value)"
          >
            提交
          </a-button>
        </a-form-item>
      </div>
    </a-comment>
  </div>
  <!-- <div>
   
    <a-list
      v-if="comments.length"
      :data-source="comments"
      :header="
        `${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`
      "
      item-layout="horizontal"
    >
      <a-list-item slot="renderItem" slot-scope="item, index">
        <template slot="actions">
      <span key="comment-basic-like">
        <a-tooltip title="Like">
          <a-icon type="like" :theme="action === 'liked' ? 'filled' : 'outlined'" @click="like" />
        </a-tooltip>
        <span style="padding-left: '8px';cursor: 'auto'">
          {{ likes }}
        </span>
      </span>
      <span key="comment-basic-dislike">
        <a-tooltip title="Dislike">
          <a-icon
            type="dislike"
            :theme="action === 'disliked' ? 'filled' : 'outlined'"
            @click="dislike"
          />
        </a-tooltip>
        <span style="padding-left: '8px';cursor: 'auto'">
          {{ dislikes }}
        </span>
      </span>
      <span key="comment-basic-reply-to">Reply to</span>
    </template>
        <a-comment
          :author="item.author"
          :avatar="item.avatar"
          :content="item.content"
          :datetime="item.datetime"
        >
        </a-comment>
      </a-list-item>
    </a-list>

    <a-comment>
      <a-avatar
        slot="avatar"
        :src="require(`../assets/img/per.jpg`)"
        alt="Han Solo"
      />
      <div slot="content">
        <a-form-item>
          <a-textarea :rows="4" :value="value" @change="handleChange" />
        </a-form-item>
        <a-form-item>
          <a-button
            class="comment-submit"
            html-type="submit"
            :loading="submitting"
            @click="addComments"
          >
            提交
          </a-button>
        </a-form-item>
      </div>
    </a-comment>
  </div> -->
</template>
<script>
export default {
  props: {
    blogId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      likes: 0,
      dislikes: 0,
      comments: [],
      submitting: false,
      value: '',
      childValue: '',
      action: null,
      userId: localStorage.getItem('userId')
    }
  },
  mounted() {
    this.getComments()
  },
  methods: {
    getComments() {
       this.$axios.post('/getAllComments', { id: this.blogId }).then((val) => {
        val.data.forEach((val) => {
          val.content = val.comments
          val.author = val.userName
          val.replyShow = false
        })
        this.comments = val.data
      })
    },
    handleChange(e) {
      this.value = e.target.value
    },
    //  添加评论
    addComments(id = 0, content) {
      // 判断父级
      let params = {
        userId: localStorage.getItem('userId'),
        content: content,
        blogId: this.blogId,
        parentId: id,
      }
       this.$axios.post('/addComments', params).then((val) => {
        if (val.status === 200) {
          this.$message.success('评论成功')
          this.getComments()
          this.value = ''
          this.childValue = ''
        } else {
          this.$message.error('评论失败')
        }
      })
    },
    like() {
      this.likes = 1
      this.dislikes = 0
      this.action = 'liked'
    },
    dislike() {
      this.likes = 0
      this.dislikes = 1
      this.action = 'disliked'
    },
    // 添加回复的方法
    reply(data) {
      this.comments.forEach((val) => {
        if (val.id === data.id) {
          val.replyShow = !val.replyShow
        } else {
          val.replyShow = false
        }
      })
    },
    // 只能删除自己的删除当前的
    deleteC(data) {
      
       this.$axios.post('/deleteComment', { id: data.id }).then((val) => {
        if (val.status === 200) {
          this.$message.success('删除成功')
          this.getComments()
        } else {
          this.$message.success('删除失败')
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
.comment-submit {
  background-color: gray;
}
.comment-submit:hover {
  border: 1px solid #fff;
  color: #fff;
}
</style>
